Vue.component('my-header',{
    name: 'Search',
    data:function (){
        return{
            user: localStorage.user ? JSON.parse(localStorage.user) : null,
            kd: ''
        }
    },
    methods:{
        logout(){
            if(confirm("您确认退出登录吗?")){
                axios.get("/v1/users/logout").then(function(){
                    localStorage.clear();//清空登录成功时保存的数据
                    location.href="/";
                })
            }
        },
        search() {
            console.log('开始搜索...');
            console.log('搜索关键字：', this.kd);
            if (this.kd !== '') {
                localStorage.setItem('searchkd', this.kd);
                location.href="/search.html";

            }console.log('搜索出错了：', error);

        },
        goToPersonalCenter() {
            window.location.href = "/personal.html";
        },
        goToAdminPage() {
            window.location.href = "/admin.html";
        }
    },
    created:function (){
    },
    template:`
        <el-header height="100px">
            <div class="center">
                <el-row gutter="10">
                    <el-col span="2">
                        <a href="/">
                             <img src="http://rvg6mjj7z.hn-bkt.clouddn.com/img/logo.jpg" width="100" height="100">
                        </a>
                    </el-col>
                    <el-col span="4">
                      <a href="/">
                        <div style="font-size:60px; font-style: italic; line-height: 100px; text-align: center;">
                            <span style="color: blue">学维</span><span style="color: #666666">网</span>
                        </div>
                      </a>
                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="0" @click="location.href='/index.html'">首页</el-menu-item>
                            <el-menu-item index="1" @click="location.href='/testDemo.html'">聊天</el-menu-item>
                            <el-menu-item index="2" @click="location.href='contentIndex.html'">动态</el-menu-item>
                            <el-menu-item index="3" @click="location.href='/question.html'">我要变强</el-menu-item>
                        </el-menu>
                    </el-col>
                                 
                    <el-col span="6">
                       <el-input style="margin-top: 15px" placeholder="请输入搜索的关键字"v-model="kd" @keydown.native.enter="search" >
                       <el-button slot="append" icon="el-icon-search" @click="search($event)"></el-button>
                       </el-input>                      
                    </el-col>
                    
                    <el-col span="2">
                        <el-popover v-if="user==null"
                                placement="top-start"
                                title="欢迎来到学维网!"
                                width="200"
                                trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
                            <el-button type="info" @click="location.href='/reg.html'">注册</el-button>
                            <el-button style="background-color: blue" @click="location.href='/login.html'">登录</el-button>
                        </el-popover>
                        
                        <el-popover v-else
                                placement="top-start"
                                title="欢迎来到学维网!"
                                width="200"
                                trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user"
                                   style="font-size: 30px;position: relative;top: 20px"></i>
                            </div>
<!--                            <div style="text-align: center">-->
<!--                                <a href="/personal.html">-->
<!--                                    <el-avatar :src="user.imgUrl">-->
<!--                                </a>-->
<!--                                <hr>-->
<!--                                <a href="/personal.html">个人中心</a>-->
<!--                                <a href="javascript:void(0)" @click="logout()">退出登录</a><br>-->
<!--                                <a v-if="user.isAdmin==1" href="/admin.html">后台管理页面</a>-->
<!--                            </div>-->
                                <div style="text-align: center">
                                    <a href="/personal.html">
                                     <el-avatar :src="user.imgUrl"></el-avatar>
                                    </a>
              
                                    <hr>
                                    <i class="el-icon-user" style="font-size: 30px"></i><a href="/personal.html" style="font-size: 30px">个人中心</a><br>
                                    <i class="el-icon-switch-button" style="font-size: 30px"></i><a href="javascript:void(0)" @click="logout()" style="font-size: 30px">退出登录</a><br>
                                    <i class="el-icon-files" v-if="user.isAdmin==1" style="font-size: 30px"></i><span><a v-if="user.isAdmin==1" href="/admin.html" style="font-size: 30px">后台管理</a></span><br>
                      
                                </div>
                          
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
    `
})